class Banner {
	constructor(oDiv, oLis, oDiv2) {
		this.index = 0;
		this.oDiv = oDiv;
		this.oLis = oLis;
		this.oDiv2 = oDiv2;
		this.oDiv.style.backgroundImage = "url(./img/index/" + this.index + ".jpg)";
		this.oLis[this.index].style.backgroundColor = "red";
		this.oDiv2.style.backgroundColor = "#0a4682";
	}

	setBackimg() {
		this.oDiv.style.backgroundImage = "url(./img/index/" + this.index + ".jpg)";
		this.bgcolor();
	}
	// 背景色变色
	bgcolor() {
		if (this.index == 1) {
			this.oDiv2.style.backgroundColor = "#F4F4F4";
		} else if (this.index == 2) {
			this.oDiv2.style.backgroundColor = "#E6F9FF";
		} else if (this.index == 3) {
			this.oDiv2.style.backgroundColor = "#BEBEBE";
		} else if (this.index == 0) {
			this.oDiv2.style.backgroundColor = "#0a4682";
		}

	}
	// 圆点变色
	setcolor() {
		for (let i = 0; i < this.oLis.length; i++) {
			if (this.index == i) {
				this.oLis[i].style.backgroundColor = "red";
			} else {
				this.oLis[i].style.backgroundColor = "#636363";
			}
		}
	}
	// 下一张
	next() {
		this.index++;
		if (this.index == this.oLis.length) {
			this.index = 0;
		}
		this.setBackimg();
		this.setcolor();

	}

	// 上一张
	prev() {
		this.index--;
		if (this.index == -1) {
			this.index = this.oLis.length - 1;
		}
		this.setBackimg();
		this.setcolor();
	}

	// 点击圆点轮播
	clickLi() {
		let that = this;
		for (let i = 0; i < this.oLis.length; i++) {
			this.oLis[i].onmousemove = function() {
				that.index = i;
				that.setBackimg();
				that.setcolor();
			}
		}
	}

	lunbo() {
		let that = this;
		let time = null;
		time = setInterval(function() {
			that.next();
		}, 2000)
		this.oDiv.onmouseover = function() {
			clearInterval(time);
		}
		this.oDiv.onmouseout = function() {
			time = setInterval(function() {
				that.next();
			}, 2000);
		}


	}
}
let oDiv = document.querySelector(".rotations");
let oDiv2 = document.querySelector(".rotation");
let oLis = $(".rotation-right-2 li");
let b = new Banner(oDiv, oLis, oDiv2);
b.lunbo();
b.clickLi();
